<template>
  <div class="mcHeaderTitle">
    <span v-for="(menu, index) in menuListData" :key="menu.id"
      :class="index == menuListData.length - 1 ? 'next' : 'prev'">{{ menu.title }} {{ index == menuListData.length - 1 ?
        "" : "/" }}
    </span>
  </div>
</template>

<script>
import { OtherCommon } from "@/libs/otherCommon.js";
export default {
  name: "headerTitle",
  data() {
    return {
      menuListData: [],
    };
  },
  watch: {
    // 路由改变，头部标题改变。
    $route: {
      handler() {
        this.menuListData = OtherCommon.getCurrentMenuInfo();
      },
      immediate: true,
    },
  },
  mounted() {
    this.menuListData = OtherCommon.getCurrentMenuInfo();
  },
};
</script>

<style></style>